<template>
	<view class="coupon-wp">
		<couponItem :model="voucherInfo"></couponItem>
		<view class="bottom-box">
			<u-button openType="share" :custom-style="{
			  background: '#276aee',
			  color: '#fff',
			  width: '682rpx',
			  border:'none'
			}">分享赠送</u-button>

		</view>
	</view>
</template>

<script>
	import couponItem from '@/pagesMall/components/couponItem/couponItem.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			couponItem
		},
		data() {
			return {
				goodsId: '',
				voucherInfo: {},
				gooodsDetailImg: [],
				showBuyBtn: true,
			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.goodsId = opt.id
				this.showBuyBtn = opt.hiddenBuyBtn == 1 ? false : true
				this.getVoucherInfo()
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			async getVoucherInfo() {
				let res = await this.$api.getMsVoucherInfo({
					id: this.goodsId,
				})
				if (res.success) {
					console.log(res.result);
					this.voucherInfo = res.result

				} else {
					this.voucherInfo = {}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			},


		},
		onShareAppMessage(e) {
			console.log(e);
			uni.showLoading({

			})
			let that = this
			const promise = new Promise(resolve => {
				console.log(resolve)
				let {
					openId,
				} = that.userInfo
				let payload = {
					id: that.goodsId,
					openId: openId
				}
				that.$api.shareVoucher(payload).then(res => {
					uni.hideLoading()
					that.showShareDlg = false
					if (res.success) {
						console.log(res.result, 'res');
						resolve({
							title: `${that.userInfo.name?that.userInfo.name:''}赠送给您${that.voucherInfo.price?`${that.voucherInfo.price}-${that.voucherInfo.name}代金券`:'代金券'}`,
							path: `/pagesMall/sharePage/sharePageCoupon?id=${res.result.id}`,
						})
					} else {
						that.showShareDlg = false
						uni.showToast({
							title: '生成分享页面失败,引导进入首页',
							icon: 'none'
						})
					}
				})

			})
			return {
				promise,
				title: `我的拜帖`,
				path: '/pages/card/card',
			}
		},
	}
</script>
<style lang="scss" scoped>
	.coupon-wp {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);

		.goods-main-img {
			.main-img {
				width: 750rpx;
			}

			.goods-info {
				margin-top: -10rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				padding: 32rpx;
				z-index: 2;

				.title {
					width: 740rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #1D2129;
					line-height: 45rpx;

				}

				.price-wp {
					margin-top: 20rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #FF3131;
					line-height: 50rpx;

				}
			}

			.padding-bar {
				clear: both;

				height: 40rpx;
				background-color: #f7f8fa;
			}

		}

		.goods-main-info {
			padding: 32rpx;

			.sell {
				height: 64rpx;
				display: flex;

				.sell-name {
					margin-left: 20rpx;
					height: 60rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 60rpx;

					.friend-tag {
						margin-left: 16rpx;
						text-align: center;
						display: inline-block;
						width: 80rpx;
						height: 34rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #4E5969;
						line-height: 34rpx;
						border: 1rpx solid #E5E6EB;
						border-radius: 6rpx;


					}
				}
			}

			.info {
				margin-top: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #4E5969;
				display: flex;

				.title1 {
					width: 180rpx;
				}

				.title2 {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #1D2129;
					line-height: 39rpx;

				}
			}
		}


	}
</style>